<template>
  <div
    ref="icons"
    class="icons-container"
    :style="{ left: left + 'px', top: top + 'px' }"
  >
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: "FloatIcons",
  props: {
    // 滚动id,自动隐藏不需要传滚动参数
    scroller: {
      type: String,
      default: "",
    },
    // 距离上右下左的安全距离
    padding: {
      type: String,
      default: "190 10 100 10",
    },
    // 初始位置距离底部的距离
    bottom: {
      type: Number,
      default: '',
    },
  },
  data() {
    return {
      timer: null,
      currentTop: 0,
      clientWidth: 0,
      clientHeight: 0,
      itemWidth: 0,
      itemHeight: 0,
      left: null,
      top: null,
    };
  },
  computed: {
    // 滚动对象，默认空返回window
    scrollContainer() {
      if (this.scroller === "") {
        return window;
      } else {
        return document.getElementById(this.scroller);
      }
    },
    // 安全距离
    safeArea() {
      return this.padding.split(" ");
    },
  },
  created() {
    // 屏幕宽度
    this.clientWidth = document.documentElement.clientWidth;
    // 屏幕高度
    this.clientHeight = document.documentElement.clientHeight;
  },
  mounted() {
    this.$nextTick(() => {
      // 获取滚动元素
      this.scrollContainer.addEventListener("scroll", this.handleScrollStart);
      const div = this.$refs.icons;
      // 获取宽度
      this.itemWidth = this.$refs.icons.offsetWidth;
      this.itemHeight = this.$refs.icons.offsetHeight;
      // 设置位置
      this.left = this.clientWidth - this.itemWidth - this.safeArea[1];
      this.top = this.clientHeight - this.itemWidth - this.bottom;
      // 计算边距完成后执行自动吸边函数
      this.handleScrollStart();
      div.addEventListener("touchstart", () => {
        div.style.transition = "none";
      });
      div.addEventListener("touchmove", (e) => {
        // 阻止默认动作
        e.preventDefault();
        if (e.targetTouches.length === 1) {
          const touch = event.targetTouches[0];
          this.left = touch.clientX - this.itemWidth / 2;
          this.top = touch.clientY - this.itemHeight / 2;
        }
      });
      div.addEventListener("touchend", () => {
        div.style.transition = "all 0.3s";
        // 手指放开left位置
        if (this.left > this.clientWidth / 2) {
          this.left = this.clientWidth - this.itemWidth - this.safeArea[1];
        } else {
          this.left = this.safeArea[3];
        }
        // 手指放开top位置
        if (this.top < this.safeArea[0]) {
          this.top = this.safeArea[0];
        } else if (
          this.top >
          this.clientHeight - this.itemHeight - this.safeArea[2]
        ) {
          // 不低于最低
          this.top = this.clientHeight - this.itemHeight - this.safeArea[2];
        }
        // 停留2秒钟自动吸边隐藏
        this.timer && clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          this.handleScrollStart();
        }, 2000);
      });
    });
  },
  // beforeDestroy() {
  //   this.scrollContainer.removeEventListener("scroll", this.handleScrollStart);
  // },
  methods: {
    // 滚动时候执行
    handleScrollStart() {
      // this.timer && clearTimeout(this.timer);
      // this.timer = setTimeout(() => {
      //   this.handleScrollEnd()
      // }, 1000);
      this.currentTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (this.left > this.clientWidth / 2) {
        this.left = this.clientWidth - this.itemWidth / 2;
      } else {
        this.left = -this.itemWidth / 2;
      }
    },
    // handleScrollEnd() {
    //   const scrollTop =
    //     document.documentElement.scrollTop || document.body.scrollTop;
    //   if (scrollTop === this.currentTop) {
    //     if (this.left > this.clientWidth / 2) {
    //       this.left = this.clientWidth - this.itemWidth - this.safeArea[1];
    //     } else {
    //       this.left = this.safeArea[3];
    //     }
    //     clearTimeout(this.timer);
    //   }
    // },
  },
};
</script>

<style scoped>
.icons-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  /* background: rgb(255, 255, 255); */
  /* box-shadow: 0px 2px 10px 0px rgba(198, 198, 198, 0.5); */
  border-radius: 50%;
  z-index: 1000;
  transition: all 0.3s;
}
</style>